<template>
    <view id="main">
        <!-- 顶部搜索框 -->
        <zy-topBar searchwidth="90%" scarchBottom showBack v-model="searchParam" @search="search" title="选择废物"
            paddingTop="50" height="40">
            <template #right>
                <view @tap="goaddwastetag" class="fs_12">确定</view>
            </template>
        </zy-topBar>
        <view class="content">
            <scroll-view scroll-y>
                <view v-for="item in outStore.tableDataList" class="item card flex">
                    <image v-if="item.statusCode == '1'" class="small_Icon" src="@/static/img/checked.png" />
                    <image v-else class="small_Icon" src="@/static/img/unchecked.png" />
                    <view class="item_content flex">
                        <view class="title fs_18 flex">
                            <view class="value">{{ item.name }}</view>
                        </view>
                        <view class="msg flex fs_12 color_text_gray">
                            <view class="label">废物类别</view>
                            <view class="value">{{ item.code }}</view>
                        </view>
                        <view class="msg flex fs_12 color_text_gray">
                            <view class="label">废物代码</view>
                            <view class="value">{{ item.code }}</view>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
        <view class="footer">
            <view class="left flex">
                <view class="all flex">
                    <label class="radio fs_14 color_black flex">
                        <radio style="transform:scale(0.7)" />
                        <view>全选</view>
                    </label>
                </view>
                <view class="choose">
                    <view class="fs_16 flex">
                        已选 <view class="color_blue">1</view> 项
                    </view>
                    <view class="fs_12 color_text_gray">重量合计：1吨</view>
                </view>
            </view>

            <view class="right">
                <button @tap="gowasteput" class="but">
                    下一步
                    <uni-icons color="#fff" type="arrow-right " size="16px" />
                </button>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { useOutStore } from "@/stores/modules/out/out";
const outStore = useOutStore();
const searchParam = ref("");
const search = (val: string) => {
    console.log(val);
};
const gowasteput = () => {
    uni.navigateTo({
        url: "/pages/index/put/wasteput/wasteput"
    });
};
</script>

<style lang="scss" scoped>
scroll-view {
    height: calc(100vh - 148px);

    .item {
        width: 92%;
        margin: 20px auto;
        position: relative;

        .small_Icon {
            position: absolute;
            top: 0px;
            right: 0px;
        }

        .item_content {
            flex-direction: column;
            align-items: flex-start;

            .msg {
                .label {
                    font-size: 14px;
                    color: #7C8190;
                    margin-right: 5px;
                }

                .value {
                    font-size: 14px;
                    color: #1D2541;
                }

                margin: 10px 0;
            }
        }
    }
}

.footer {
    width: 100vw;
    height: 98px;
    border-radius: 12px 12px 0px 0px;
    box-shadow: 0px -2px 10px 0px rgba(9, 14, 29, 0.1);
    /* #FFFFFF 白色 100 */
    background: rgb(255, 255, 255);
    position: absolute;
    bottom: 0rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    left: 0;
    padding: 20px;

    .all {
        margin-right: 10px;
    }

    .but {
        display: flex;
        justify-content: space-around;
        align-items: center;
        border-radius: 12px;
        background-color: #0077FF;
        color: #ffffff;
        font-size: 16px;
    }

    .but::after {
        border: none;
    }
}
</style>
